<template>
  <div class="m-page">
    <van-nav-bar
      class="m-page__bar"
      title="区域分红"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-cell
        :title="`区域分红`"
        value-class="g-c--red"
        :value="`累计分红：${total_area_agent_earn}元`"
      ></van-cell>
    </van-cell-group>
    <van-tabs v-model="active" swipeable :ellipsis="`false`">
      <van-tab
        v-for="(item, index) of accountFlowList"
        :key="index"
        :title="accountFlowNameList[index]"
      >
        <van-panel
          v-for="(panel, panel_index) of item.accountFlowList"
          :key="panel_index"
          class="g-mb--10"
          :title="`流水号：${panel.sn}`"
          :status="panel.type === 'inflow' ? '已分红' : '支出'"
        >
          <div class="g-c--gray g-fs--12 g-p--10">
            <p class="g-c--red g-fs--14 g-mb--5">金额：{{ panel.amount }}元</p>
            <p>分红类型：{{ panel.name }}</p>
            <p>关联订单号：{{ panel.param }}</p>
            <p>用户ID：{{ panel.user_id }}</p>
            <p>用户编号：{{ panel.number }}</p>
            <p>打款时间：{{ panel.created_time }}</p>
          </div>
        </van-panel>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { NavBar, Cell, CellGroup, Panel, Tab, Tabs } from "vant";
import { userModel } from "@/api";
import Tool from "@/lib/tool";
const tool = new Tool();
export default {
  name: "bonus",
  components: {
    "van-nav-bar": NavBar,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-panel": Panel,
    "van-tab": Tab,
    "van-tabs": Tabs
  },
  data() {
    return {
      active: 0,
      total_area_agent_earn: 0,
      accountFlowList: [],
      accountFlowNameList: [
        "区域发货官方奖励",
        "区域收货官方奖励",
        "区域收货上级区代官方奖励",
        "区域收货上上级区代官方奖励"
      ]
    };
  },
  created() {
    this.getTotalAreaAgentEarn();
    this.getAccountFlowList();
  },
  methods: {
    getTotalAreaAgentEarn() {
      userModel._getTotalAreaAgentEarn().then(res => {
        this.total_area_agent_earn = res.total_area_agent_earn;
      });
    },
    getAccountFlowList() {
      const getList0 = userModel._getAccountFlowList({
        name: this.accountFlowNameList[0]
      });
      const getList1 = userModel._getAccountFlowList({
        name: this.accountFlowNameList[1]
      });
      const getList2 = userModel._getAccountFlowList({
        name: this.accountFlowNameList[2]
      });
      const getList3 = userModel._getAccountFlowList({
        name: this.accountFlowNameList[3]
      });
      Promise.all([getList0, getList1, getList2, getList3]).then(res => {
        this.accountFlowList = res.map(arr => {
          arr.accountFlowList.map(list => {
            list.created_time = tool.formatTime(list.created_time);
            return list;
          });
          return arr;
        });
        console.log(this.accountFlowList);
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped></style>
